//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：coopListItem.js
// 创建时间：2016年11月08日
// 创建人员：朱勇
// 功能说明：角标公共组件
//################################
'use strict';
import React,{PropTypes} from 'react';
import {
  View,
  StyleSheet,
  Text
} from 'react-native';

class Badge extends React.Component {
  static defaultProps = {
        extraPaddingHorizontal: 5,
        minHeight: 5,
        minWidth: 5,
    }

    static propTypes = {
        //borderRadius: PropTypes.number,   //number 18, null 5
        extraPaddingHorizontal: PropTypes.number,
        minHeight: PropTypes.number,
        minWidth: PropTypes.number,
    }

  constructor(props){
    super(props);

    // 初始状态
    this.state = {}
    this._width = 0
  }

  _onLayout = (e) => {
        let width

        if (e.nativeEvent.layout.width <= e.nativeEvent.layout.height) {
            width = e.nativeEvent.layout.height
        }
        else {
            width = e.nativeEvent.layout.width + this.props.extraPaddingHorizontal
        }
        width = Math.max(width, this.props.minWidth)
        if (this._width == width) {
            return
        }
        this._width = width
        let height = Math.max(e.nativeEvent.layout.height, this.props.minHeight)
        let borderRadius = height / 2
        let right=-Math.floor(width/2)
        this._container.setNativeProps({
            style: {
                width,
                height,
                borderRadius,
                right,
            },
        });
    }

  render(){
    return (
      <View style={[styles.MainView, (this.props.MainViewStyle ? this.props.MainViewStyle : {})]}>
        {
          // main element
          this.props.MainElement
        }
        <View ref={ component => this._container = component } style={[styles.IconBadge, (this.props.IconBadgeStyle ? this.props.IconBadgeStyle : {}),{top:this.props.IconBadgeStyle?-Math.floor(this.props.IconBadgeStyle.height/2):-10,right:this.props.IconBadgeStyle?-Math.floor(this.props.IconBadgeStyle.width):-10}]}>
          {
            this.props.value?
            <Text style={styles.textStyle} onLayout={this._onLayout}>{this.props.value}</Text>
            :null
          }
        </View>
      </View>
    )
  }
}

var styles = StyleSheet.create({
  IconBadge: {
    position:'absolute',
    top:-10,
    right:-15,
    width:10,
    height:10,
    borderRadius:15,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FF0000',
    // borderColor:'gray',
    // borderWidth:1
  },
  textStyle:{
    color:'white',
    fontSize:12
  },
  MainView: {
    // borderWidth:1,
    // borderColor:'gray'
  }
});

module.exports = Badge;
